<template>
  <div class="app">
    <Game>
      <template scope="{games}">
        <h2>游戏推荐</h2>
        <ul>
          <li v-for="game in games" :key="game.id">
            {{ game.name }}
          </li>
        </ul>
      </template>
    </Game>
    <Game>
      <template slot-scope="{ games }">
        <h2>游戏推荐</h2>
        <ol>
          <li v-for="game in games" :key="game.id">
            {{ game.name }}
          </li>
        </ol>
      </template>
    </Game>
    <Game>
      <template v-slot="atiguigu">
        <h2>游戏推荐</h2>
        <h3 v-for="game in atiguigu.games" :key="game.id">
          {{ game.name }}
        </h3>
      </template>
    </Game>
  </div>
</template>

<script>
import Game from "./components/SLOT/Game.vue";
export default {
  name: "App",
  components: { Game },
};
</script>
<style>
.app {
  background-image: linear-gradient(0deg, #5ee7df 0%, #b490ca 100%);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px #5ee7df;
  justify-content: space-evenly;
  display: flex;
}
img {
  width: 100%;
}
</style>